<template>
    <el-dialog v-model="dialogopen" title="新增商品分类" width="500px">
        <!-- <p>{{ updateitem }}</p> -->
        <el-form class="Classify-form" label-width="80" :model="formitem">

            <el-form-item label="上级分类">
                <el-select v-model="formitem.parentId">
                    <el-option label="顶级分类" :value="0"></el-option>
                    <el-option v-for="item in classifyData" :key="item._id" :label="item.name"
                        :value="item._id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="分类名称">
                <el-input v-model="formitem.name" placeholder="请输入分组名称" />
            </el-form-item>
 

           
            <el-form-item label="分类图标 (180*180):">
              <el-upload action="http://nocat.life:3011/images/upload"
                class="avatar-uploader" :show-file-list="false"
                 :on-success="handleicon">
                 <img v-if="formitem.icon" :src="formitem.icon" class="avatar" />
                 <el-icon v-else class="avatar-uploader-icon">
                    <PictureFilled/>
                </el-icon>
              </el-upload>
            </el-form-item>



            <el-form-item label="分类大图 (180*180):">
                <el-upload action="http://nocat.life:3011/images/upload"
                class="avatar-uploader" :show-file-list="false"
                 :on-success="handleimage">
                 <img v-if="formitem.image" :src="formitem.image" class="avatar" />
                 <el-icon v-else class="avatar-uploader-icon">
                    <PictureFilled/>
                </el-icon>
              </el-upload>
            </el-form-item>


            <el-form-item label="排序">
                <el-input v-model="formitem.sort"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-radio-group v-model="formitem.state">
                    <el-radio label="显示" :value="1"></el-radio>
                    <el-radio label="隐藏" :value="0"></el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>




        <template #footer>
            <el-button @click="dialogopen = false">取消</el-button>
            <el-button type="primary" @click="handleok">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { classifyitem } from '@/api/modules/classifiesff';
import { ref, watch } from 'vue';
import api from '@/api';
import { useFetchData } from '@/hooks/fetchData';
import {PictureFilled} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import type { UploadProps } from 'element-plus'
let emit = defineEmits(['getclassifydata']);


let { getClassifyDataAsync, classifyData } = useFetchData();



let dialogopen = defineModel()
//接收父组件传递的修改数据
let { updateitem } = defineProps<{
    updateitem: classifyitem
}>()

let formitem = ref<classifyitem>({
    parentId: 0
});
//每当，updateitem发生改变时，将最新的updateitem赋值给formitem
watch(() => updateitem, () => {
    formitem.value = updateitem
}, {
    deep: true
})


// 图标
const handleicon: UploadProps['onSuccess'] = (
  response,
) => {
 console.log(  response.data);
 formitem.value.icon=response.data;
}


// 大图
const handleimage: UploadProps['onSuccess'] = (
  response,
) => {
 console.log(  response.data);
 formitem.value.image=response.data;
}





let handleok = () => {
    if (formitem.value._id) {
        handleupdate()
    } else {
        handleadd();
    }

}

//
let handleadd = async () => {
    // console.log(formitem.value);
    let res = await api.classifies.add(formitem.value)
    // console.log(res);
    if (res.code = 200) {
        ElMessage.success('分类数据新增成功');
        dialogopen.value = false;
        emit('getclassifydata');
    }
    else {
        ElMessage.error(res.message);
    }

}
//修改
let handleupdate = async () => {
    let res = await api.classifies.update(formitem.value)
    // console.log(res)
    if (res.code = 200) {
        ElMessage.success('分类数据修改成功');
        dialogopen.value = false;
        emit('getclassifydata');
        // emit('getclassifydata')
    }
    else {
        ElMessage.error(res.message);
    }

}

//挂载完成发送请求
// onMounted(()=>{
//   getClassifyDataAsync();
// })
//弹窗打开的时候发请求
watch(dialogopen, () => {
    if (dialogopen.value) {
        getClassifyDataAsync();
    }
})






</script>


<style scoped>
.avatar-uploader .avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>




<style lang="scss">

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  text-align: center;
}










.Classify-form {
    .el-form-item__label {
        height: auto;
    }
}
</style>